<template>
    <div>
        机构名称<input type="text" v-model="querydata.name" >
        特色服务<td><select v-model="querydata.tsever">
            <option value="">请选择</option>
                <option value="基础互联网使用培训">基础互联网使用培训</option>
                <option value="基础防诈骗培训">基础防诈骗培训</option>
                <option value="养生操">养生操</option>
                </select></td>

   <input type="button" value="查询" @click="GetPageData">
   <input type="button" value="删除选中数据" @click="deleteall">
   <input type="button" value="发布选中数据" @click="updateall">
  
     <table>
        <thead>
            <tr>
                <th>  <input type="checkbox" @change="selectall" v-model="selectallstate">  </th>
                <th>编号</th>
                <th>机构名称</th>
                <th>预览图</th>
                <th>特色服务</th>
                <th>营业时间</th>
                <th>地址</th>
                <th>联系电话</th>
                <th>是否发布</th>
                
            </tr>
        </thead>
        <tbody>
            <tr v-for="d in data">
             <td> <input v-model="idlist" type="checkbox" :value="d.id"></td>
             <td>{{ d.id }}</td>
             <td>{{ d.name }}</td>
             <td>       
                 <img style="height: 100px;width: 100px;" :src="'https://localhost:7167'+d.img" alt="">
                 </td>
             <td>{{ d.tSever }}</td>
             <td>{{ d.startTime }}</td>
             <td>{{ d.address }}</td>
             <td>{{ d.phone }}</td>
             <td>{{ d.faBu ?"已发布":"未发布" }}</td>
            </tr>
        </tbody>
     </table>
     <input type="button" value="首页"  @click="page(1)" >
   <input type="button" value="上一页" @click="page(2)">
   <input type="button" value="下一页" @click="page(3)">
   <input type="button" value="尾页"   @click="page(4)">
   一共{{pagedata.count}}条，一共{{pagedata.pcount}}页，每页显示{{querydata.size}}条，当前第{{querydata.index}}页
   <select v-model="querydata.size" @change="Setsize">
    <option>2</option>
    <option>3</option>
    <option>5</option>
   </select>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted, render } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router= useRouter()
const idlist = ref([0]);  
const selectallstate = ref(false);
const selectall=()=>{
   if(selectallstate.value)
   {
        for(var i=0;i<data.value.length;i++)
            {
                idlist.value.push(data.value[i].id); 
            }
   }
   else{
        idlist.value=[0]
   }
}
const querydata=ref({
    index:1,
    size:2,
    name:"",
    tsever:"",
});
const Setsize=()=>{
 querydata.value.index = 1;
 GetPageData()
  }
const deleteall=()=>{
    if(!confirm("真的要删除吗")){
        return;
    }

    if(idlist.value.length < 0){
        alert('请先至少选择一条数据')
       
        return;
    }
    axios.get("https://localhost:7167/api/SaveOld/DeleteRange",{params:{idstring:idlist.value.toString()}}).then(res=>{

        if(res.data>0){
            alert('删除成功')
            GetPageData();
        }
        else{
            alert('删除失败')
        }

    })
}
const updateall=()=>{
    if(!confirm("是否确认发布")){
        return;
    }
 
    if(idlist.value.length < 0){
        alert('请先至少选择一条数据')
        return;
    }
    axios.get("https://localhost:7167/api/SaveOld/FabuUpdateRange",{params:{idstring:idlist.value.toString()}}).then(res=>{
      
        if(res.data>0){
            alert('发布成功')
            GetPageData();
        }
        else{
            alert('发布失败')
        }

    })
}
const page = (val:any)=>{
    if(val==1){
        querydata.value.index=1;
        GetPageData()
    }
    if(val==2){
        if( querydata.value.index > 1){
            querydata.value.index-=1;
            GetPageData()
        }
    }
    if(val==3){
        if( querydata.value.index < pagedata.value.pcount){
            querydata.value.index+=1;
            GetPageData()
        }
    }
    if(val==4){
        querydata.value.index=pagedata.value.pcount;
        GetPageData()
    }
}
const pagedata=ref({
    count:0,
    pcount:0
})
const GetPageData = () => {
    axios.get('https://localhost:7167/api/SaveOld/GetPage',{params:querydata.value}).then(res => {
        data.value=res.data.data
       pagedata.value.count = res.data.count;
       pagedata.value.pcount = Math.ceil(pagedata.value.count/querydata.value.size)

    })
}
onMounted(() => {
    GetPageData();
})
const data = ref([
    {
      "id": 2,
      "name": "张三养老院",
      "img": "aaaaaaaaaaaaaaa",
      "tSever": "啊啊啊",
      "startTime": 24,
      "address": "啊啊啊",
      "phone": "111111111111",
      "faBu": true,
      "isDelete": true
    }
]);

</script>

<style scoped>

</style>